<style lang="scss" scoped>
@import '../../css/resource.scss';
.car-head{padding: 18px 24px;background: #fcfdff}
.check-all{margin-left: 4px;}
.car-body{padding: 18px 24px;border-top: 1px solid #eee;background: #fff;}
.car-body:first-child{border-top: none;}
.car-content{height: 90px;line-height: 90px;text-align: center;}
.buy-car .car-body .el-col:first-child .car-content, .car-head .el-col:first-child > div{
    text-align: left;
    padding-left:10px;
}
.car-title{text-align: center;}
.avatar-box{float: left;margin-right: 12px;width: 64px;height: 90px;}
.avatar-box img{width: 100%;height: 100%;}
.author-box{position: relative;}
.off-line{position: absolute;left: 75px;top:35px;color: #f00;}
.book-name{text-overflow: ellipsis;overflow: hidden;white-space: nowrap;margin-bottom: 30px;padding-top: 8px;}
.author-name{text-overflow: ellipsis;overflow: hidden;white-space: nowrap;color: #999}
.count-box{display: inline-block;padding-top: 30px;}

.minus-plus-btn{float: left;border:1px solid #aaa;background: #fcfdff;width: 20px;height: 28px;line-height: 28px;cursor: pointer;}
.icon-font{font-size: 6px;}
.book-count{float: left;width: 40px;height: 26px;line-height: 26px;border:none;border-top:1px solid #aaa;border-bottom: 1px solid #aaa;text-align: center;outline: none;}

.singal-price-box{text-align: center;;padding-top: 12px;}
.singal-price-box1{text-align: center;padding-top: 20px;}
.singal-price-box2{text-align: center;padding-top: 32px;}
.line-box{color: #aaa;}
.line-box span{text-decoration: line-through;}
.all-price{color: $mcm;font-size: 18px;}
.del-icon{font-size: 18px;color: #999;cursor: pointer;}

.car-foot{background: #fff;margin-top: 12px;}
.already-check{float: left;padding: 18px; padding-left:28px;}
.already-check span{margin-left: 4px;}
.all-money-box{float: right;padding: 16px 20px;}
.account-btn{float: right;color: #fff;padding: 16px 40px;background: $mco;font-size: 16px;cursor: pointer;}
.btn-grey{background: #ccc;}
.all-money{color:$mcm;font-weight: bold;font-size: 16px;}

.no-resource{background: #fff;min-height: 500px;text-align: center;padding-top: 160px;}
.no-word{color: #999;padding: 20px 0 26px;}
</style>

<template>
    <section class="buy-car">

        <section v-show="list.length!=0">
            <el-row class="car-head">
                <el-col :span="2"><div> <el-checkbox v-model="allChecked" @change="checkedAll"></el-checkbox><span class="check-all">全选</span></div></el-col>
                <el-col :span="8"><div>资源信息</div></el-col>
                <el-col :span="4"><div class="car-title">数量</div></el-col>
                <el-col :span="4"><div class="car-title">单价(元)</div></el-col>
                <el-col :span="4"><div class="car-title">总金额(元)</div></el-col>
                <el-col :span="2"><div class="car-title">操作</div></el-col>
            </el-row>
            <div>
                <template v-for="(one, index) in list">
                    <el-row class="car-body">
                        <el-col :span="2">
                            <div class="car-content"><el-checkbox v-model="one.checked" @change="checkChange(one)" :disabled="one.EnAble==0"></el-checkbox></div>
                        </el-col>
                        <el-col :span="8">
                            <div>
                                <div class="book-info clearfix">
                                    <div class="avatar-box"><img :src="one.ResourceCover" alt=""></div>
                                    <div class="author-box">
                                        <div class="book-name">{{one.ResourceName}}</div>
                                        <div class="author-name">{{one.Author}}</div>
                                        <div class="off-line" v-show="one.EnAble==0">已下架</div>
                                    </div>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="4">
                            <div class="car-content">
                                <div class="count-box">
                                    <span class="minus-plus-btn" @click="countMinus(one)"><i class="el-icon-minus icon-font"></i></span>
                                    <input type="text" class="book-count" v-model="one.Num" @input="countChange(one)" :disabled="one.EnAble==0">
                                    <span class="minus-plus-btn" @click="countPlus(one)"><i class="el-icon-plus icon-font"></i></span>
                                </div>
                            </div>
                        </el-col>
                        <el-col :span="4">
                            <div class="singal-price-box" v-show="one.PriceNumList.length==3">
                                <div :class="{'line-box':Number(one.Num)>Number(one.num1)}">1-{{one.num1}}份：<span>{{Number(one.price1).toFixed(2)}}</span></div>
                                <div :class="{'line-box':Number(one.Num)<Number(one.num1)+1||Number(one.Num)>Number(one.num2)}">{{Number(one.num1)+1}}-{{one.num2}}份：<span>{{Number(one.price2).toFixed(2)}}</span></div>
                                <div :class="{'line-box':Number(one.Num)<Number(one.num3)}">≧{{one.num3}}份：<span>{{Number(one.price3).toFixed(2)}}</span></div>
                            </div>
                            <div class="singal-price-box1" v-show="one.PriceNumList.length==2">
                                <div :class="{'line-box':Number(one.Num)>Number(one.num1)}">1-{{one.num1}}份：<span>{{Number(one.price1).toFixed(2)}}</span></div>
                                <div :class="{'line-box':Number(one.Num)<Number(one.num2)}">≧{{one.num2}}份：<span>{{Number(one.price2).toFixed(2)}}</span></div>
                            </div>
                            <div class="singal-price-box2" v-show="one.PriceNumList.length==1">
                                <div><span>{{Number(one.price1).toFixed(2)}}</span></div>
                            </div>
                        </el-col>
                        <el-col :span="4">
                            <div class="car-content" v-show="one.PriceNumList.length==3">
                                <span class="all-price">{{ one.Num < (one.num1+1) ? (one.Num*one.price1).toFixed(2):one.Num>one.num2?(one.Num*one.price3).toFixed(2):(one.Num*one.price2).toFixed(2)}}</span>
                            </div>
                            <div class="car-content" v-show="one.PriceNumList.length==2">
                                <span class="all-price">{{one.Num < one.num2 ? (one.Num*one.price1).toFixed(2):(one.Num*one.price2).toFixed(2)}}</span>
                            </div>
                            <div class="car-content" v-show="one.PriceNumList.length==1">
                                <span class="all-price">{{(one.Num*one.price1).toFixed(2)}}</span>
                            </div>
                        </el-col>
                        <el-col :span="2"><div class="car-content" @click="delGoods(one)"><i class="el-icon-delete del-icon"></i></div></el-col>
                    </el-row>
                </template>

            </div>
            <div class="car-foot clearfix">
                <div class="already-check"><el-checkbox v-model="allChecked" @change="checkedAll"></el-checkbox><span>已选({{alreadyChecked.length}})</span></div>
                <span class="account-btn" :class="{'btn-grey':allMoney==0}" @click="account">结算</span>
                <div class="all-money-box">合计：<span class="all-money">￥{{allMoney.toFixed(2)}}</span></div>
            </div>
            <!-- <div v-show="pageInfo.total>20">
                <el-pagination class="mt20 fr"
                               background
                               @size-change="getList"
                               @current-change="getList"
                               :current-page.sync="pageInfo.page"
                               :page-size="pageInfo.pageSize"
                               layout="prev, pager, next, jumper"
                               :total="pageInfo.total">
                </el-pagination>
            </div> -->
        </section>

        <section class="no-resource" v-show="list.length==0">
            <div><img src="../../images/ic-default.png" alt=""></div>
            <p class="no-word">购物车还是空的哟！</p>
        </section>
    </section>

</template>

<script>

import qs from 'qs'
import com from 'js/common.js'

export default{
    data: function(){
        return {
            list:[],
            allChecked:true,
            alreadyChecked:[],
            pageInfo: {
                pageSize: 1024,
                total:0,
                page:1
            },
            path: [
                {
                    'name':'资源管理',
                    'path':'/resource/book-list'
                },
                {
                    'name':'购物车',
                    'path':'/resource/buy-car'
                }
            ],
        }
    },
    methods: {
        account(){
            let nowList = [];
            this.alreadyChecked.forEach(item => {
                nowList.push({ResourceID:item.ResourceID,Num:item.Num})
            })
            axios.post('/com/orders/add', qs.stringify({
                orderGoods:nowList,
                orderType:1,
                relationID:0
            })).then((res) => {
                var d = res.data;
                if(d.flag == 1){
                    this.$emit('ievent',d.data.NowNum);
                    this.$router.push({name:'resourceResourcePay',query:{OID:d.data.OrderID,allCount:this.allMoney}})
                }else {
                    this.$message.error(d.msg)
                }
            })
        },
        delGoods(one){
            this.$confirm('删除后数据不可恢复, 请再次确认是否要删除', '您确定要删除该订单吗？', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                axios.post('/com/orders/deleteCart', qs.stringify({
                    CartID:one.CartID
                })).then((res) => {
                    var d = res.data;
                    if(d.flag == 1){
                        this.getList();
                    }else {
                        this.$message.error(d.msg)
                    }
                })
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        checkedAll(){
            if(this.allChecked){
                this.list.forEach((one)=>{
                    if(one.EnAble==1){
                        one.checked=true;
                    }
                });
                this.alreadyChecked = this.list.filter(item=>{
                    return item.EnAble==1
                });
            }else {
                this.list.forEach((one)=>{
                    one.checked=false;
                });
                this.alreadyChecked = [];
            }

        },
        checkChange(one){
            if(one.checked){
                this.alreadyChecked = this.list.filter((item)=>{
                    return item.checked == true;
                });
                let onLineList = this.list.filter(item=>{
                    return item.EnAble==1
                })
                if(this.alreadyChecked.length==onLineList.length){
                    this.allChecked = true;
                }
                this.allMoney += Number(one.allPrice);
            }else {
                this.allMoney -=Number(one.allPrice);
                this.allChecked = false;
                this.alreadyChecked = this.list.filter((item)=>{
                    return item.checked == true;
                });
            }
        },
        countMinus(one){
            if(one.checked){
                if(one.Num>1){
                    one.Num--;
                    if(one.PriceNumList.length==3){
                        one.allPrice = one.Num<one.num1+1 ? one.allPrice=(one.Num*one.price1).toFixed(2):one.Num<=one.num2?one.allPrice=(one.Num*one.price2).toFixed(2):one.allPrice=(one.Num*one.price3).toFixed(2);
                    }else if(one.PriceNumList.length==2){
                        one.allPrice = one.Num<one.num1+1 ? one.allPrice=(one.Num*one.price1).toFixed(2):one.allPrice=(one.Num*one.price2).toFixed(2);
                    }else {
                        one.allPrice = (one.Num*one.price1).toFixed(2)
                    }

                }
            }else {
                if(one.Num>1){
                    if(one.EnAble==1){
                        one.checked = true;
                        one.Num--;
                        if(one.PriceNumList.length==3){
                            one.allPrice = one.Num<one.num1+1 ? one.allPrice=(one.Num*one.price1).toFixed(2):one.Num<=one.num2?one.allPrice=(one.Num*one.price2).toFixed(2):one.allPrice=(one.Num*one.price3).toFixed(2);
                        }else if(one.PriceNumList.length==2){
                            one.allPrice = one.Num<one.num1+1 ? one.allPrice=(one.Num*one.price1).toFixed(2):one.allPrice=(one.Num*one.price2).toFixed(2);
                        }else {
                            one.allPrice = (one.Num*one.price1).toFixed(2)
                        }
                        this.alreadyChecked = this.list.filter((item)=>{
                            return item.checked == true;
                        });
                        if(this.alreadyChecked.length==this.list.length){
                            this.allChecked = true;
                        }
                    }
                }
            }
        },
        countPlus(one){
            if(one.checked){
                one.Num++;
                if(one.PriceNumList.length==3){
                    one.allPrice = one.Num<one.num1+1 ? one.allPrice=(one.Num*one.price1).toFixed(2):one.Num<=one.num2?one.allPrice=(one.Num*one.price2).toFixed(2):one.allPrice=(one.Num*one.price3).toFixed(2);
                }else if(one.PriceNumList.length==2){
                    one.allPrice = one.Num<one.num1+1 ? one.allPrice=(one.Num*one.price1).toFixed(2):one.allPrice=(one.Num*one.price2).toFixed(2);
                }else {
                    one.allPrice = (one.Num*one.price1).toFixed(2)
                }
            }else {
                if(one.EnAble==1){
                    one.checked = true;
                    one.Num++;
                    if(one.PriceNumList.length==3){
                        one.allPrice = one.Num<one.num1+1 ? one.allPrice=(one.Num*one.price1).toFixed(2):one.Num<=one.num2?one.allPrice=(one.Num*one.price2).toFixed(2):one.allPrice=(one.Num*one.price3).toFixed(2);
                    }else if(one.PriceNumList.length==2){
                        one.allPrice = one.Num<one.num1+1 ? one.allPrice=(one.Num*one.price1).toFixed(2):one.allPrice=(one.Num*one.price2).toFixed(2);
                    }else {
                        one.allPrice = (one.Num*one.price1).toFixed(2)
                    }
                    this.alreadyChecked = this.list.filter((item)=>{
                        return item.checked == true;
                    });
                    if(this.alreadyChecked.length==this.list.length){
                        this.allChecked = true;
                    }
                }
            }

        },
        countChange(one){
            if(one.EnAble==1){
                if(typeof(Number(one.Num))!='number'||one.Num<1){
                    one.Num = 1;
                }
                if(one.PriceNumList.length==3){
                    one.allPrice = one.Num<one.num1+1 ? one.allPrice=(one.Num*one.price1).toFixed(2):one.Num<=one.num2?one.allPrice=(one.Num*one.price2).toFixed(2):one.allPrice=(one.Num*one.price3).toFixed(2);
                }else if(one.PriceNumList.length==2){
                    one.allPrice = one.Num<one.num1+1 ? one.allPrice=(one.Num*one.price1).toFixed(2):one.allPrice=(one.Num*one.price2).toFixed(2);
                }else {
                    one.allPrice = (one.Num*one.price1).toFixed(2)
                }
            }
        },
        getList(){
            axios.post('/com/orders/cartList', qs.stringify({
                pagesize:this.pageInfo.pageSize,
                page:this.pageInfo.page
            })).then((res) => {
                var d = res.data;
                if(d.flag == 1){
                    let money=0;
                    d.data.Rows.forEach(item=>{
                        item.PriceNumList = [];
                        item.ResourcePrice = eval("(" + item.ResourcePrice + ")");
//                        for(let key in item.ResourcePrice){
//                            item.PriceNumList.push({price:key,countNum:item.ResourcePrice[key],countBig:item.ResourcePrice[key].split('-')[1]||item.ResourcePrice[key]});
//                        }
                        item.ResourcePrice.forEach((one)=>{
                            item.PriceNumList.push({price:one.price,countNum:one.num,countBig:String(one.num).split('-')[1]||one.num});
                        })
                        item.allPrice = 0;
                        item.Num = Number(item.Num);
                        if(item.PriceNumList.length==3){
                            item.price1 = item.PriceNumList[0].price;
                            item.price2 = item.PriceNumList[1].price;
                            item.price3 = item.PriceNumList[2].price;

                            item.num1 = Number(item.PriceNumList[0].countBig);
                            item.num2 = Number(item.PriceNumList[1].countBig);
                            item.num3 = Number(item.PriceNumList[2].countBig);

                            item.allPrice = item.Num<item.num1+1 ? item.allPrice=(item.Num*item.price1).toFixed(2):item.Num>item.num3?item.allPrice=(item.Num*item.price3).toFixed(2):item.allPrice=(item.Num*item.price2).toFixed(2);
                        }else if(item.PriceNumList.length==2){
                            item.price1 = item.PriceNumList[0].price;
                            item.price2 = item.PriceNumList[1].price;

                            item.num1 = Number(item.PriceNumList[0].countBig);
                            item.num2 = Number(item.PriceNumList[1].countBig);

                            item.allPrice = item.Num<item.num1+1 ? item.allPrice=(item.Num*item.price1).toFixed(2):item.allPrice=(item.Num*item.price2).toFixed(2);
                        }else {
                            item.price1 = item.PriceNumList[0].price;
                            item.allPrice = (item.Num*item.price1).toFixed(2)
                        }
                        if(item.EnAble==1){
                            item.checked = true;
                        }else {
                            item.checked = false;
                        }
                        money += Number(item.allPrice);
                    })
                    this.list = d.data.Rows;


                    function compare(property){
                        return function(a,b){
                            var value1 = a[property];
                            var value2 = b[property];
                            return value2 - value1;
                        }
                    }
                    this.list.sort(compare('EnAble'))


                    this.alreadyChecked = this.list.filter(one=>{
                        return one.EnAble==1
                    });
                    this.allMoney = money;
                    this.pageInfo.total=Number(d.data.Total);


                    let imgArr = [];

                    this.list.forEach(item=>{
                        imgArr.push({url: item.ResourceCover,param:'image/resize,m_fixed,h_300,w_400'})
                    });

                    com.getFullOssFiles(imgArr,(fullUrlArr)=>{
                        this.list.forEach((item,index)=>{
                            item.ResourceCover = fullUrlArr[index]
                        });
                    })


                    
                    this.$emit('ievent', d.data.Total);




                }else {
                    this.$message.error(d.msg)
                }
            });
        }
    },
    mounted: function(){
        this.$store.commit('setPath', this.path)
        this.getList();
    },
    computed:{
        "allMoney" : function() {
            let money = 0;
            this.list.forEach((one)=>{
                if(one.checked){
                    money += Number(one.allPrice);
                }
            });
            return money;
        }
    }
}


</script>
